<template>
  <div>
    <div style="font-size: 20px" v-show="ttl>0">支付剩余时间 <span style="color: red;font-size: 30px"><CountDown :remainTime="ttl" @countDowmEnd="loaddata"></CountDown></span></div>
    <div><orderitem :data-source="dataSource" :totalPrice="parseFloat(totalPrice)" :address="address"></orderitem></div>
    <div style="text-align: right">
      <a-button type="primary" @click="showModal" :disabled="calDisAblePay">
        模拟支付
      </a-button>
    </div>
    <div>
      <a-modal v-model="visible" title="请支付" on-ok="handleOk">
        <template slot="footer">
          <a-button key="back" @click="handleCancel">
            取消
          </a-button>
          <a-button key="submit" type="primary" :loading="loading" @click="handleOk">
            已支付
          </a-button>
        </template>
        <div><img :src="qrcodesrc"></div>
      </a-modal>
    </div>
  </div>
</template>
<script>
  import { findPaymentByUserId, createOrder, buildQrCodebyUserId } from '@/api/book'
  import Orderitem from '@/components/mycomponents/OrderItem'
  import CountDown from '@/components/mycomponents/CountDown'
  import PayBtn from '@/components/mycomponents/PayBtn'

  export default {
    components: { CountDown, Orderitem, PayBtn },
    data () {
      return {
        user: {},
        totalPrice: 0,
        address: '',
        dataSource: [],
        ttl: 0,
        loading: false,
        visible: false,
        qrcodesrc: ''
      }
    },
    methods: {
      // 创建订单
      createOrder () {
        setTimeout(() => {
          createOrder(this.user.id).then(res => {
            // console.log('**************收到返回值***************')
            // console.log(res)
            // console.log('**************收到返回值***************')
            // console.log(res.result)
            this.$message.success(res.result)
          }).catch(error => {
            if (error.response && error.response.status === 403) {
              this.$message.error('api请求方式错误')
            }
            if (error.response && error.response.status === 404) {
              this.$message.error('api未找到')
            }
            if (error.response && error.response.status === 500) {
              this.$message.error('服务器内部错误')
            }
          })
          this.$router.push('/mybookstore/mybookstoreorders')
        }, 100)
      },
      loaddata () {
        // 重新加载购物车
        setTimeout(() => {
          findPaymentByUserId(this.user.id).then(res => {
            // console.log('**************收到返回值***************')
            // console.log(res)
            // console.log('**************收到返回值***************')
            // console.log(res.result)
            if (res.result.length === 0) {
              // console.log('tmplst.length ===0 ')
              this.dataSource = []
              this.address = ''
              this.totalPrice = 0
              this.$message.error(res.responseText)
              return
            }
            var tmplst = res.result.order
            tmplst.forEach((value, key) => {
              var tmp = value.price * value.num
              var result = parseFloat(tmp)
              result = Math.round(tmp * 100) / 100
              tmp = result.toString()
              var posdecimal = tmp.indexOf('.')
              if (posdecimal < 0) {
                posdecimal = tmp.length
                tmp += '.'
              }
              // eslint-disable-next-line camelcase
              while (tmp.length <= posdecimal + 2) {
                tmp += '0'
              }
              value.singerNum = parseFloat(tmp)
            })
            this.dataSource = tmplst
            this.totalPrice = res.result.totalPrice
            this.address = res.result.address
            this.ttl = res.result.ttl
          }).catch(error => {
            if (error.response && error.response.status === 403) {
              this.$message.error('api请求方式错误')
            }
            if (error.response && error.response.status === 404) {
              this.$message.error('api未找到')
            }
            if (error.response && error.response.status === 500) {
              this.$message.error('服务器内部错误')
            }
          })
        }, 100)
      },
      showModal () {
        setTimeout(() => {
          buildQrCodebyUserId(this.user.id).then(res => {
            // console.log('**************buildQrCodebyUserId***************')
            // console.log(res.result)
            const imgdata = res.result
            if (imgdata.length === 0) {
              this.$message.error('支付失败')
            } else {
              this.qrcodesrc = 'data:image/png;base64,' + imgdata
              this.visible = true
            }
          }).catch(error => {
            if (error.response && error.response.status === 403) {
              this.$message.error('api请求方式错误')
            }
            if (error.response && error.response.status === 404) {
              this.$message.error('api未找到')
            }
            if (error.response && error.response.status === 500) {
              this.$message.error('服务器内部错误')
            }
          })
        }, 100)
      },
      handleOk (e) {
        this.loading = true
        setTimeout(() => {
          this.visible = false
          this.loading = false
          this.createOrder()
        }, 3000)
      },
      handleCancel (e) {
        this.visible = false
      }
    },
    computed: {
      calDisAblePay () {
        if (this.dataSource.length > 0) {
          return false
        } else {
          return true
        }
      }
    },
    mounted () {
      this.loaddata()
    },
    created () {
      this.user = this.$store.getters.userInfo
    }
  }
</script>

<style scoped>
</style>
